<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-box" >
      <input class="search-input" v-model="searchKey" placeholder="输入关键词搜索" :disabled="false" />
      <image class="search-icon" src="/static/images/search.png" mode="aspectFit" @click="goSearch"/>
    </view>
    <!-- 横向导航 -->

    <!-- 资讯列表 -->
    <scroll-view class="list-scroll" scroll-y>
      <view 
        v-for="(item, index) in newsList" 
        :key="index"
        @click="goToDetail(item.id)"
        class="info-card"
      >
        <image class="info-image" :src="BASE_URL+item.imgUrl" mode="aspectFill" />
        <view class="info-content">
          <text class="info-title">{{ item.title }}</text>
          <text class="info-desc">{{ item.content }}</text>
          <text class="info-date">{{ formatDate(item.publishTime) }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getNewsList,getNewsCategoryList } from '@/api/news'
import { formatDate } from '@/utils/dateUtils';
import {BASE_URL} from '@/utils/request'
export default {
  data() {
    return {
      BASE_URL: BASE_URL,
      activeNav: 1,
      searchKey: '',
      navItems: [{id:0,categoryName:'全部'}],
      newsList: [
        // 原始数据保持不动
        
      ]
    }
  },
  async created() {
    // 从storage变量获取参数
    try {
      // 获取新闻分类列表
      const res = await getNewsCategoryList(0)
      if(res){
        for (let i = 0; i < res.length; i++) {
          const element = res[i];
          this.navItems.push({
            id: element.id,
            categoryName:element.categoryName
          });
        }
      }
    } catch (error) {
      console.error('获取新闻列表失败', error)
    }
  },
  methods: {
    formatDate,
    async handleTabChange(tab) {
      this.activeNav = tab.id;
      try {
        // 获取全部新闻列表
        this.newsList = [];
        let param = {
          category:tab.id,
          pageNum:1,
          count:20
        }
        const res = await getNewsList(param)
        if(res && res.list && res.list.length > 0){
          res.list = res.list.map(item => {
            // 去除HTML标签并截取前100个字符
            item.content = item.content
              .replace(/<[^>]+>/g, '') // 去除HTML标签
              .substring(0, 100) // 截取前100个字符
              .trim(); // 去除首尾空格
            return item;
          });
          this.newsList = res.list;
        }
      } catch (error) {
        console.error('获取新闻列表失败', error)
      }
    },
    async goSearch() {
      try {
        // 获取全部新闻列表
        this.newsList = [];
        let param = {
          title:this.searchKey,
          category:this.activeNav,
          pageNum:1,
          count:20
        }
        const res = await getNewsList(param)
        if(res && res.list && res.list.length > 0){
          res.list = res.list.map(item => {
            // 去除HTML标签并截取前100个字符
            item.content = item.content
              .replace(/<[^>]+>/g, '') // 去除HTML标签
              .substring(0, 100) // 截取前100个字符
              .trim(); // 去除首尾空格
            return item;
          });
          this.newsList = res.list;
        }
      } catch (error) {
        console.error('获取新闻列表失败', error)
      }
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/info/detail?id=${id}`
      })
    }
  },
  async onShow(){
    const tempInfoType = uni.getStorageSync('tempInfoType');
    if (tempInfoType) {
      this.activeNav = tempInfoType;
      // console.log('接收到参数：', this.activeNav);
      // 清除 Storage 数据
      uni.removeStorageSync('tempInfoType');
    }
    try {
      // 获取全部新闻列表
      let param = {
        pageNum:1,
        count:20
      }
      if(this.activeNav != 0){
        param.category = this.activeNav;
      }
      // 获取全部新闻列表
      this.newsList = [];
      const res = await getNewsList(param)
      if(res && res.list && res.list.length > 0){
          res.list = res.list.map(item => {
            // 去除HTML标签并截取前100个字符
            item.content = item.content
              .replace(/<[^>]+>/g, '') // 去除HTML标签
              .substring(0, 100) // 截取前100个字符
              .trim(); // 去除首尾空格
            return item;
          });
        this.newsList = res.list;

      }
    } catch (error) {
      console.error('获取新闻列表失败', error)
    }
  }
}
</script>

<style>
.container {
  padding: 15px;
  background: #f5f5f5;
  /* 原高度设置移除 */
}

/* 固定搜索框 */
.search-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  margin: 15px; /* 保持原有外边距 */
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1); /* 添加阴影增强层次感 */
}

/* 固定导航栏 */
.nav-scroll {
  position: fixed;
  top: 60px; /* 原80px减少20px */
  padding: 5px 0; /* 减小垂直间距 */
}

.list-scroll {
  margin-top: 60px; /* 原140px减少40px */
  height: calc(100vh - 100px); /* 对应调整高度 */
}

/* 调整搜索框下边距 */
.search-box {
  margin: 15px 15px 10px; /* 下边距从15px减到10px */
}

/* 原其他样式保持不变 */
.search-box {
  background: #fff;
  border-radius: 20px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.search-input {
  flex: 1;
  font-size: 14px;
}
.search-icon {
  width: 20px;
  height: 20px;
}

/* 导航栏样式 */
.nav-scroll {
  white-space: nowrap;
  margin-bottom: 15px;
}
.nav-item {
  display: inline-block;
  padding: 8px 15px;
  margin-right: 10px;
  font-size: 14px;
  color: #666;
}
.active {
  color: #1a73e8;
  border-bottom: 2px solid #1a73e8;
}

/* 资讯卡片样式 */
.info-card {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
}
.info-image {
  width: 30%;
  height: 100px;
  border-radius: 6px;
  margin-right: 10px;
}
.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.info-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.info-date {
  font-size: 12px;
  color: #999;
  text-align: right;
}
</style>